<div ng-init="init();" class="kmi-layout-content home-content">
    <div class="fixed-background">
        <div class="animation-content">
            <img src="image/smes_v340/orange-blur.svg" alt="" class="orange-blur">
            <img src="image/smes_v340/blue-blur.svg" alt="" class="blue-blur">
        </div>
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-layout-page left" id="home_left_menu">
            <div class="smes-logo">
                <div class="side-menu-item" ng-click="home();">
                    <img src="image/smes_v340/hamburg.png" />
                </div>
                <div class="brand-title" ng-if="companyName">
                    <div class="custom">
                        <div class="title" ng-bind="companyName"></div>
                    </div>
                </div>
                <div class="logo" ng-if="!companyName">
                    <img src="image/smes_v340/logo_ch.png" alt="">
                    <img src="image/smes_v340/logo_en.png" alt="">
                </div>
            </div>
            <div class="perfect-scrollbar">
                <!-- 20220614 modify by Alan for#112054 : 修正功能選擇顯示邏輯 -->
                <div class="left-menu-item" ng-click="myFavourite();" ng-class="{'is-select' : selectModel == 'myFavourite', 'is-space': menuItem.name == 'space'}">
                    <div class="menu-icon" >
                        <img src="image/smes_v340/W_Com_Love_nor_32-1.png" ng-if="selectModel != 'myFavourite'" />
                        <img src="image/smes_v340/W_Com_Love_sel_32.png" ng-if="selectModel === 'myFavourite'" />
                    </div>
                    <div class="menu-title" ng-bind="'home.myFavourite' | translate"></div>
                    <div class="kmi-can-click"></div>
                </div>
                <div class="left-menu-item" ng-click="openSearchDialog();" ng-class="{'is-select' : isOpenSearchDialog, 'is-space': menuItem.name == 'space'}">
                    <div class="menu-icon" >
                        <img src="image/smes_v340/W_Com_Search_nor_32-1.png" ng-if="!isOpenSearchDialog" />
                        <img src="image/smes_v340/W_Com_Search_sel_32.png" ng-if="isOpenSearchDialog" />
                    </div>
                    <div class="menu-title" ng-bind="'home.search' | translate"></div>
                    <div class="kmi-can-click"></div>
                </div>
                <div ng-repeat="menuItem in menu | orderBy: 'order' | filter: {isShow : true} track by menuItem.name" ng-click="menuClick(menuItem);"
                    class="left-menu-item" ng-class="{'is-select' : selectModel == menuItem.name, 'is-space': menuItem.name == 'space'}">
                    <div class="menu-icon">
                        <img ng-src="{{ 'image/smes_v340/menu/' + menuItem.icon + (selectModel == menuItem.name ? '_sel' : '') + '.png' }}"></img>  
                    </div>
                    <div class="menu-title" ng-bind="menuItem.displayText"></div>
                    <div class="kmi-can-click" ng-if="menuItem.name != 'space'"></div>
                </div> 
            </div>
            <div class="bottom-panel">
                <div class="left-menu-item" ng-repeat="tool in sideTools" ng-click="tool.click(tool);" ng-class="{'is-select' : selectModel == menuItem.name, 'is-space': menuItem.name == 'space'}">
                    <div class="menu-icon dotBox" >
                        <img src="image/smes_v340/menu/W_Com_Message_nor_32.png"/>
                        <div class="dot" style="right: 8px;" ng-show="tool.dot > 0" ng-bind="tool.dot"></div>
                    </div>
                    <div class="menu-title" ng-bind="tool.name | translate"></div>
                    <div class="kmi-can-click"></div>
                </div>
                <div class="left-menu-item" ng-click="config_setting();" ng-class="{'is-select' : selectModel == menuItem.name, 'is-space': menuItem.name == 'space'}">
                    <div class="menu-icon" >
                        <img src="image/smes_v340/menu/W_Com_Setting_nor_32.png" />
                    </div>
                    <div class="menu-title" ng-bind="'SideMenu.settings' | translate"></div>
                    <div class="kmi-can-click"></div>
                </div>
            </div>
        </div> 
        <!-- 20220726 modify by Alan for#107965 : 配合規格進行調整 -->
        <div class="kmi-layout-page right" ng-if="selectModel != 'myFavourite'">
            <div class="kmi-header-row">
                <div class="brand-title" ng-if="companyName">
                    <div class="custom">
                        <img src="" alt="" class="brand">
                        <div class="gap"></div>
                    </div>
                    <div class="digiwin">
                        <img src="image/smes_v340/logo_ch.png" alt="">
                        <img src="image/smes_v340/logo_en.png" alt="">
                    </div>
                </div>
                <div class="row-left">
                    <div class="left-text">{{$root.menuTitle | translate}}</div>
                </div>
                <div class="row-right">     
                    <div class="header-login right-text" ng-bind="('home.user' | translate) + userInfo"></div>
                    <div class="header-login right-text" ng-bind="('home.env' | translate) + envInfo"></div>
                </div>
            </div>
            
            <div class="perfect-scrollbar">
                <div class="sub-tag-content">
                    <div class="sub-tag-item" ng-repeat="tagItem in subMenuTags">
                        <div class="sub-tag-title"  ng-click="tagItem.show = !tagItem.show" ng-hide="checkSubMenuTag();">
                            <div class="sub-tag-title_btn">
                                <i class="material-icons close" ng-show="tagItem.show"></i>
                                <i class="material-icons open" ng-hide="tagItem.show"></i>
                            </div>
                            <div class='report-column-title' ng-bind="'common.menu_tag.'+tagItem.title | translate"></div>
                        </div>
                        <div class="no-sub-tag-margin"  ng-if="checkSubMenuTag()"></div>
                        <div class="sub-memu-content" ng-class="{'sub-menu-show':tagItem.show}">
                            <div ng-repeat="menuItem in tagItem.childs | filter: {isTempHide:'!Y'} | orderBy: 'order' track by menuItem.name"
                                class="menu-item program-component" 
                                ng-class="{'is-space': menuItem.name == 'space'}" 
                                ng-click="subMenuClick(menuItem);">
                                <div class="icon menu"><img ng-src="{{ 'image/smes_v340/menu/' + menuItem.icon + '.png' }}" alt=""></div>      
                                <div class="title" ng-bind="menuItem.displayText"></div>
                                <div class="option" ng-click="openOptionDialog(menuItem, $event)">
                                    <img src="image/smes_v340/option_icon.png" alt="">
                                </div>
                                <!-- 20220726 modify by Alan for#107965 : 配合規格進行調整 -->
                                <div class="icon flag" ng-if="menuItem.name === favouriteInfo.DefaultProgram"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="kmi-layout-footer">
                <button class="mdl-button mdl-js-button mdl-button--fab mdl-shadow--custom mdl-button--custom1 sub"
                        ng-click="options();">
                        <img src="image/icons/arrange.png"/>
                </button>
            </div>
        </div>
        
        <!-- 20220726 modify by Alan for#107965 : 配合規格進行調整 -->
        <div class="kmi-layout-page right" ng-if="selectModel === 'myFavourite'">
            <div class="kmi-header-row">
                <div class="brand-title" ng-if="companyName">
                    <div class="custom">
                        <img src="" alt="" class="brand">
                        <div class="gap"></div>
                    </div>
                    <div class="digiwin">
                        <img src="image/smes_v340/logo_ch.png" alt="">
                        <img src="image/smes_v340/logo_en.png" alt="">
                    </div>
                </div>
                <div class="row-left">
                    <div class="left-text" ng-bind="'myFavourite.title' | translate"></div>
                </div>
                <div class="row-right">     
                    <div class="header-login right-text" ng-bind="('home.user' | translate) + userInfo"></div>
                    <div class="header-login right-text" ng-bind="('home.env' | translate) + envInfo"></div>
                </div>
            </div>

            <div class="empty-page" ng-if="!hasFavourite()">
                <div class="title" ng-bind="'myFavourite.hint' | translate"></div>
                <button class="add-btn" ng-click="editFavourite()">
                    <img src="image/smes_v340/favorite_add.png" alt="" class="icon-img">
                </button>
            </div>
            
            <div class="perfect-scrollbar">
                <div class="main-page" ng-if="hasFavourite()">
                
                    <div class="module-list">
                        <div class="module"
                            ng-repeat="module in menu | orderBy: 'order' | filter: isModuleHaveFavourite track by module.name"
                            ng-class="{'is-select' : selectModel == module.name, 'is-space': module.name == 'space'}">
                            <div class="module-title" ng-bind="module.displayText"></div>

                            <div class="program-list">
                                <div class="program-component"
                                    ng-repeat="program in module.childs | orderBy: 'order' | filter: {isShow : true} track by program.name"
                                    ng-if="isFavourite(program)"
                                    ng-click="executeProgram(program)">
                                    <div class="icon menu">
                                        <!-- 20230310 modify by Alan for#129828 :  -->
                                        <img ng-src="{{ 'image/smes_v340/menu/' + program.icon + '.png' }}" alt="">
                                    </div>
                                    <div class="title" ng-bind="program.displayText"></div>
                                    <div class="option" ng-click="openOptionDialog(program, $event)">
                                        <img src="image/smes_v340/option_icon.png" alt="">
                                    </div>
                                    <!-- 20220726 modify by Alan for#107965 : 配合規格進行調整 -->
                                    <div class="icon flag" ng-if="program.name === favouriteInfo.DefaultProgram"></div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                
            </div>
            
            <button class="edit-btn" ng-click="editFavourite()">
                <img src="image/smes_v340/favourite_edit.png" alt="" class="icon-img">
            </button>
        </div>

    </div>
</div>
